<!-- 整个文章列表页面
  该页面只是展示页面的，不进行任何操作-->

<template>
  <div>
    <!-- 点击列表项，跳转到详情页 -->
    <ArticleItem v-for="obj,index in arr"
                 :key="index"
                 :obj="obj"
                 @click.native="detailFn(obj)"
                 @close="btn"></ArticleItem>
    <!-- 反馈面板 -->
    <!-- 现象：list组件配合action-sheet后，一触底就无限请求
    原因：list数据更新了，但页面没有更新新的标签，导致list组件的高度没增加 ，且loading =FALSE,可以继续刷新，以为触底了，就继续请求数据，但页面没铺出来
    不停的请求数据，陷入了死循环 -->
    <!-- get-container所在的标签不能作为根标签 -->
    <!-- 解决方案：div套起来 -->
    <!-- 出现的根源：
    vue编译：在模板中，循环出10个cell,和一个actionsheet
    ----->
    <!-- 保存在虚拟DOM上---又更改了改在位置，挂载到真实dom上（actionsheet被切走了）
    虚拟dom :10条数据
    第二次：新的10条数据回来了， -->

    <div>
      <van-action-sheet v-model="show"
                        get-container="body"
                        :actions="actions"
                        @select="onSelect"
                        cancel-text="取消" />
    </div>

  </div>
</template>
<script>
import ArticleItem from '@/components/ArticleItem.vue'
export default {
  props: {
    arr: Array
  },
  components: {
    ArticleItem
  },
  data () {
    return {
      artId: null,
      show: false, // 底部的反馈面板
      // 当前页面显示的数据
      actions: [{ name: '不感兴趣' }, { name: '反馈垃圾信息' }, { name: '拉黑作者' }],
      // 一级面板显示的数据
      firstActions: [{ name: '不感兴趣' }, { name: '反馈垃圾信息' }, { name: '拉黑作者' }],
      // 二级面板显示的数据
      secondActions: [
        {
          value: -1,
          name: '返回'
        },
        {
          value: 12,
          name: '其它问题'
        },
        {
          value: 1,
          name: '标题夸张'
        },
        {
          value: 2,
          name: '低俗色情'
        },
        {
          value: 3,
          name: '错别字多'
        },
        {
          value: 4,
          name: '旧闻重复'
        },
        {
          value: 6,
          name: '内容不实'
        },
        {
          value: 8,
          name: '侵权'
        },
        {
          value: 5,
          name: '广告软文'
        },
        {
          value: 7,
          name: '涉嫌违法犯罪'
        }
      ]
    }
  },
  methods: {
    // 面板选择事件
    onSelect (action, index) {
      // action是点击的数据对象，index是索引
      if (action.name === '反馈垃圾信息') {
        // 点击的是反馈列表
        this.actions = this.secondActions
      } else if (action.name === '返回') {
        this.actions = this.firstActions
      } else {
        // 在恰当时机，派发事件
        // （反馈不敢兴趣）
        this.$emit('action', action, this.artId)
        this.show = false// 点击收起
      }
    },
    btn (art_id) {
      this.show = true
      // 把点击x的文章id存到data变量上
      this.artId = art_id
    },
    detailFn (item) {
      this.$emit('detail', item)
    }

  }
}

</script>
